<template>
    <div>
        <page-main title="能力分析-个人" title-icon="dashboard">
            <el-row :gutter="20">
                <el-col :md="7">
                    <div class="flex align-center">
                        班级:
                        <select-panel :data="select.class" placeholder="请选择班级" clearable style="margin-left: 15px;" />
                    </div>
                </el-col>
                <el-col :md="7">
                    <div class="flex align-center" style="margin-left: 15px;">
                        小组:
                        <select-panel :data="select.group" placeholder="请选择小组" clearable style="margin-left: 15px;" />
                    </div>
                </el-col>
                <el-col :md="7">
                    <div class="flex align-center" style="margin-left: 15px;">
                        姓名：
                        <el-input v-model="select.name" size="small" clearable placeholder="请输入人名" style="width: 80%;" />
                    </div>
                </el-col>
                <el-col :md="3" style="text-align: right;">
                    <button-panel icon="el-icon-search" title="搜索" />
                </el-col>
            </el-row>
            <el-row :gutter="20" type="flex" align="middle" style="margin-top: 15px;">
                <el-col :md="24">
                    学员：
                    <button-panel v-for="item in studentData.list"
                                  :key="item.id"
                                  :title="item.name" :round="true"
                                  :type="item.id === studentData.click ? 'primary' : ''"
                                  style="width: 10%; margin-right: 10px;"
                                  @click="studentClick(item)"
                    />
                </el-col>
            </el-row>
        </page-main>
        <page-main :title="`学情分析-`+studentData.name">
            <el-row :gutter="20">
                <el-col :md="12">
                    <el-card shadow="never" header="综合能力分析（蛛网图）">
                        <div style="width: 100%; height: 550px;">
                            <radar-chart id="radar2" :indicator="chartData.indicator" :series="chartData.series" />
                        </div>
                    </el-card>
                </el-col>
                <el-col :md="12">
                    <el-card shadow="never" header="综合能力分析（柱状图">
                        <div style="width: 100%; height: 550px;">
                            <bar-chart :x-data="barData.xData" :series="barData.series" />
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </page-main>
        <page-main title="详细技能分析-程海超">
            <el-row>
                <el-col :md="5">
                    <div class="analysis-left">
                        教学技能分析
                        <el-progress :percentage="50" style="margin-top: 15px;" />
                    </div>
                </el-col>
                <el-col :md="14" style="text-align: center;">
                    <div class="analysis-center flex justify-center align-center flex-direction">
                        学习情况
                        <ul class="flex">
                            <li>
                                计划总结：
                                <div class="input-num">23</div>
                            </li>
                            <li>
                                教学反思：
                                <div class="input-num">5</div>
                            </li>
                            <li>
                                学生评语：
                                <div class="input-num">5</div>
                            </li>
                            <li>
                                报告：
                                <div class="input-num">5</div>
                            </li>
                        </ul>
                    </div>
                </el-col>
                <el-col :md="5" style="text-align: right;">
                    <div class="analysis-right">
                        <button-panel title="查看详情" @click="CheckAnalysisDetail" />
                    </div>
                </el-col>
            </el-row>
        </page-main>
    </div>
</template>

<script>
import PageMain from '@/components/PageMain'
import SelectPanel from '@/components/selectPanel/selectPanel'
import ButtonPanel from '@/components/buttonPanel/buttonPanel'
import RadarChart from '@/components/chart/radarChart'
import {randomMath} from '@/util'
import BarChart from '@/components/chart/barChart'

export default {
    components: {BarChart, RadarChart, ButtonPanel, SelectPanel, PageMain},
    data() {
        return {
            select: {
                class: [{
                    cvalue: '1',
                    label: '班级1'
                }, {
                    cvalue: '2',
                    label: '班级2'
                }, {
                    cvalue: '选项3',
                    label: '班级3'
                }],
                group: [
                    {
                        cvalue: '1',
                        label: '小组1'
                    }, {
                        cvalue: '2',
                        label: '小组2'
                    }, {
                        cvalue: '选项3',
                        label: '小组3'
                    }
                ],
                name: ''
            },
            chartData: {
                indicator: [],
                series: []
            },
            studentData: {
                list: [
                    {
                        id: 1,
                        name: '程海超'
                    },
                    {
                        id: 2,
                        name: '宋明宇'
                    },
                    {
                        id: 3,
                        name: '陈汉亮'
                    }
                ],
                click: 1,
                name: '程海超'
            },
            barData: {
                xData: ['书面及表达能力', '教学设计技能', '学科教学技能', '说课评课技能', '教学研究技能'],
                series: [120, 200, 150, 80, 70]
            }
        }
    },
    mounted() {
        this.getChartData()
    },
    methods: {
        studentClick(data) {
            const {id, name} = data
            this.studentData.click = id
            this.studentData.name = name
        },
        getChartData() {
            const indicator =
                [
                    {name: '书面及表达技能'},
                    {name: '现代教育技能'},
                    {name: '教学研究技能'},
                    {name: '说课拼课技能'},
                    {name: '学科教学技能'},
                    {name: '教学设计功能'},
                    {name: '组织和指导综合技能'}
                ]
            const series = []
            for (let i = 0; i < 6; i++) {
                series.push({
                    name: '王' + i,
                    value: [randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000), randomMath(1, 1000)]
                })
            }
            this.chartData.series = series
            this.chartData.indicator = indicator
        },
        CheckAnalysisDetail() {
            this.$router.push('/studentAnalysis/ability/detail')
        }
    }
}
</script>

<style scoped lang="scss">
::v-deep {
    .el-card__body {
        padding: 15px 0 0 0 !important;
    }
}
.analysis-left,
.analysis-right {
    text-align: center;
}
.analysis-right {
    margin-top: 15px;
}
.input-num {
    border: 1px solid #dedede;
    padding: 5px 8px;
    border-radius: 6px;
}
.analysis-center {
    ul {
        li {
            margin-top: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 18px;
            font-size: 14px;
        }
    }
}
</style>
